<!--
 * @Author: 曹捷
 * @Date: 2020-06-18 16:24:04
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-06-18 17:29:40
 * @Description: 关注弹出层
--> 
<template>
  <div class="obit-focus">
    <div class="obit-focus-title">
      <span @click="close" class="btn btn-middle-3 f-l">取消</span>
      添加关注领域
      <span @click="select" class="btn btn-middle-2 f-r">确定</span>
    </div>

    <checkbox-group @change="onKeyInput($event,'checkList')" class="flex-l-a checkbox">
      <label :key="index" v-for="(item,index) in dataList">
        <checkbox :checked="checkList.indexOf(item[keys]) !==-1" :value="item[keys]" />
        {{item[label]}}
      </label>
    </checkbox-group>
  </div>
</template>

<script>
import utilMix from '@/app-modules/mixin/utilMix.js'
export default {
  mixins: [utilMix],
  inject: ['popup'],
  props: {
    value: {
      type: Array
    },
    dataList: {
      type: Array
    },
    keys: {
      type: String,
      default: 'key'
    },
    label: {
      type: String,
      default: 'label'
    }
  },
  watch: {
    value() {
      this.initdata()
    }
  },
  data() {
    return {
      checkList: []
    }
  },
  methods: {
    /**
     * 选择内容
     */
    select(item, index) {
      this.$emit('input', this.checkList)
      this.$emit('select', this.checkList)
      this.popup.close()
    },
    close() {
      this.popup.close()
    },
    initdata() {
      this.checkList = [...this.value]
    }
  },
  mounted() {
    this.initdata()
  }
}
</script>

<style lang="scss">
.obit-focus {
  padding: 0 30rpx;
  height: 800rpx;
  background: #ffffff;
  .uni-label-pointer {
    width: 29%;
    padding: 54rpx 0 16rpx 0;
  }
  .checkbox {
    padding-bottom: 40rpx;
  }
  .obit-focus-title {
    height: 122rpx;
    font-size: 32rpx;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #e1e1e1;
    .btn {
      height: 75rpx;
      line-height: 75rpx;
      padding: 0;
      width: 160rpx;
    }
  }
}
</style>